<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {
		selectBatStatus
	} from './req.js'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
	  showdata:{
		  "unConnectedNum": 0,
		  "chargingErrorNum": 0,
		  "disChargingNormalNum": 0,
		  "code": 1,
		  "totalNum": 0,
		  "chargingNormalNum": 0,
		  "disChargingErrorNum": 0,
		  "offLineNormalNum": 0,
		  "offLineErrorNum": 0
	  },
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.seleb()
			this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
	  // async seleb() {
	  // 	let parm = {
	  // 		batModelId: '',
	  // 		batNo: '',
	  // 		batTypeId: '',
	  // 		operationDepartment: ''
	  // 	}
	  // 	let result = await selectBatStatus(parm);
	  // 	//console.log("结果",result);
	  // 	this.showdata = result;
	  // 	this.initChart();
	  // },
    initChart() {
		let that = this;
      this.chart = echarts.init(this.$el, 'macarons')
let data1 = Number(that.showdata.offLineNormalNum+that.showdata.offLineErrorNum);
				data1 = data1==0?null:data1;
      this.chart.setOption({
		  title: {
		  	text: '车辆状态',
		  	textStyle: {
		  		fontSize: 20,
		  		fontWeight: 400
		  	},
		  	left: '0',
		  	top: '2%'
		  },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: ['正常', '故障', '运输中', '离线']
        },
		color:['#00cc00c9','#ffa300','#00aaff','#585252c9'],
        series: [
          {
            name: '车辆状态',
            type: 'pie',
            //roseType: 'radius',
            radius: '50%',
           center: ['50%', '38%'],
            data: [
              { value: 2, name: '正常' },
              { value: 3, name: '故障' },
              { value: 3, name: '运输中' },
              { value: 2, name: '离线' }
            ],
            emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
          }
        ]
      })
    }
  }
}
</script>
